<!--一线数据填报-->
<template>
	<div class="wrapper-container">
		<el-tabs v-model="activeName" v-show="dataForm['个人信息'] && dataForm['个人信息'].filter(m=>m.isUse ==1).length>0">
			<el-tab-pane label="填报人信息" name="first">
				<div class="my-form-container" :style="{height:Math.ceil(dataForm['个人信息'].filter(m=>m.isUse ==1).length/2)*60+2+'px'}">
					<el-row class="my-form-item">
						<el-col class="border" :span="12" v-for="i in dataForm['个人信息']" :key="i" v-if="i.isUse == 1">
							<div class="my-form-item-label">{{i.fieldName}}</div>
							<div class="my-form-item-value">{{allValue.fieldCode}}</div>
						</el-col>
					</el-row>						
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" v-show="dataForm['时间信息'] && dataForm['时间信息'].filter(m=>m.isUse ==1).length>0">
			<el-tab-pane label="时间信息" name="first">
				<div class="my-form-container" :style="{height:Math.ceil(dataForm['时间信息'].filter(m=>m.isUse ==1).length/2)*60+2+'px'}">
					<el-row class="my-form-item" >
						<el-col class="border" :span="12" v-for="i in dataForm['时间信息']" :key="i" v-if="i.isUse == 1">
							<div class="my-form-item-label" v-if="i.isUse == 1">{{i.fieldName}}</div>
							<div class="my-form-item-value">
								<el-select v-if="i.fieldName=='学期' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110">
									<el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
								</el-select>
								<el-date-picker v-if="i.fieldName=='日期' && i.isUse == 1" class="time" v-model="allValue[i.fieldCode]" type="date" value-format="yyyy-MM-dd" @change="changeValue"></el-date-picker>
								<span  v-if="i.fieldName=='周次' && i.isUse == 1">{{i.zhouci}}</span>
								<el-select v-if="i.fieldName=='星期' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110" >
									<el-option label="周一" value="周一"></el-option>
									<el-option label="周二" value="周二"></el-option>
									<el-option label="周三" value="周三"></el-option>
									<el-option label="周四" value="周四"></el-option>
									<el-option label="周五" value="周五"></el-option>
									<el-option label="周六" value="周六"></el-option>
									<el-option label="周日" value="周日"></el-option>
								</el-select>
								<el-select v-if="i.fieldName=='节次' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110">
									<el-option v-for="item in i.fieldDatasources" :key="item.displayName" :label="item.displayName" :value="item.displayName"></el-option>
								</el-select>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" v-show="dataForm['授课信息'] && dataForm['授课信息'].filter(m=>m.isUse ==1).length>0">
			<el-tab-pane label="授课信息" name="first">
				<div class="my-form-container" :style="{height:Math.ceil(dataForm['授课信息'].filter(m=>m.isUse ==1).length/2)*60+2+'px'}">
					<el-row class="my-form-item">
						<el-col class="border" :span="12" v-for="i in dataForm['授课信息']" :key="i" v-if="i.isUse == 1">
							<div class="my-form-item-label" v-if="i.isUse == 1">{{i.fieldName}}</div>
							<div class="my-form-item-value">
								<div class="box-center" v-if="i.fieldName=='授课教员' && i.isUse == 1">
									<el-radio v-model="allValue.skjyxn" :label="true">校内</el-radio>
									<el-select v-model="allValue.skjyValue" placeholder="请选择" class="width110 right78" >
										<el-option v-for="item in i.fieldDatasources" :key="item.id" :label="item.displayName" :value="item.displayName+'-'+item.id"></el-option>
									</el-select>
									<el-radio v-model="allValue.skjyxn" :label="false">校外</el-radio>
									<el-input class="width110" v-model="allValue.skjyName"></el-input>
								</div>
								<el-select v-if="i.fieldName=='教员单位' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110" >
									<el-option v-for="item in i.fieldDatasources" :key="item.id" :label="item.displayName" :value="item.displayName"></el-option>
								</el-select>
								<div class="box-center" v-if="i.fieldName=='课程名称' && i.isUse == 1">
									<el-radio v-model="allValue.kcmcxn" :label="true">校内</el-radio>
									<el-select v-model="allValue.xnkcmcValue" placeholder="请选择" class="width110 right78" >
										<el-option v-for="item in i.fieldDatasources" :key="item.id" :label="item.displayName" :value="item.displayName+'-'+item.id"></el-option>
									</el-select>
									<el-radio v-model="allValue.kcmcxn" :label="false">校外</el-radio>
									<el-input class="width110" v-model="allValue.kcmcName"></el-input>
								</div>
								<el-select v-if="i.fieldName=='授课方式' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110" >
									<el-option v-for="item in i.fieldDatasources" :key="item.displayName" :label="item.displayName" :value="item.displayName"></el-option>
								</el-select>
								<div class="box-center"  v-if="i.fieldName=='上课地点' && i.isUse == 1">
									<el-radio v-model="allValue.skddxn" :label="true">校内</el-radio>
									<el-select v-model="allValue.skddValue" placeholder="请选择" class="width110 right78" >
										<el-option v-for="item in i.fieldDatasources" :key="item.id" :label="item.displayName" :value="item.displayName+'-'+item.id"></el-option>
									</el-select>
									<el-radio v-model="allValue.skddxn" label="false">校外</el-radio>
									<el-input class="width110" v-model="allValue.skddName"></el-input>
								</div>
								<span v-if="i.fieldName=='授课对象' && i.isUse == 1"> 授课对象</span>
								<el-select v-if="i.fieldName=='辅导教员' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110">
									<el-option v-for="item in i.fieldDatasources" :key="item.displayName" :label="item.displayName" :value="item.displayName"></el-option>
								</el-select>
								<span v-if="i.fieldName=='授课内容' && i.isUse == 1"> 授课内容</span>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" v-show="dataForm['状态信息'] && dataForm['状态信息'].filter(m=>m.isUse ==1).length>0">
			<el-tab-pane label="状态信息" name="first">
				<div class="my-form-container" :style="{height:Math.ceil(dataForm['状态信息'].filter(m=>m.isUse ==1).length/2)*60+2+'px'}">
					<el-row class="my-form-item">
						<el-col class="border" :span="12" v-for="i in dataForm['状态信息']" :key="i" v-if="i.isUse == 1">
							<div class="my-form-item-label" v-if="i.isUse == 1">{{i.fieldName}}</div>
							<div class="my-form-item-value" >
								<el-input class="width110" v-model="allValue[i.fieldCode]" v-if="(i.fieldName == '应到人数' || i.fieldName == '实到人数') && i.isUse == 1"></el-input>
								<div v-if="i.fieldName == '调停课情况' && i.isUse == 1" style="display:flex">
									<div class="box-center">
										<el-checkbox label="是" v-model="allValue.ttTrue" @change="tt1">是</el-checkbox>
										<img v-if="allValue.ttTrue" class="img-css" src="../../../../assets/assessment/icon-plan-record-detail.png" @click="choseTT">
									</div>
									<el-checkbox label="否" v-model="allValue.ttFalse" @change="tt">否</el-checkbox>
								</div>
								<el-select  v-if="i.fieldName == '跟课队干部' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110" >
									<el-option label="正常" value="正常"></el-option>
									<el-option label="调课" value="调课"></el-option>
									<el-option label="停课" value="停课"></el-option>
								</el-select>
								<el-select v-if="i.fieldName == '教学状态' && i.isUse == 1" v-model="allValue[i.fieldCode]" placeholder="请选择" class="width110" >
									<el-option v-for="item in i.fieldDatasources" :key="item.displayName" :label="item.displayName" :value="item.displayName"></el-option>
								</el-select>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" v-show="dataForm['听课信息'] && dataForm['听课信息'].filter(m=>m.isUse ==1).length>0">
			<el-tab-pane label="听课信息" name="first">
				<div class="my-form-container" :style="{height:Math.ceil(dataForm['听课信息'].filter(m=>m.isUse ==1).length/2)*60+2+'px'}">
					<el-row class="my-form-item">
						<el-col class="border" :span="12" v-for="i in dataForm['听课信息']" :key="i" v-if="i.isUse == 1">
							<div class="my-form-item-label" v-if="i.isUse == 1">{{i.fieldName == '听课出差时间'?'出差时间':i.fieldName}}</div>
							<div class="my-form-item-value">
								<el-select v-if="i.fieldName == '听课方式' && i.isUse == 1" v-model="allValue.tkfs" placeholder="请选择" class="width110" >
									<el-option v-for="item in i.fieldDatasources" :key="item.displayName" :label="item.displayName" :value="item.displayName"></el-option>
								</el-select>
								<el-input v-if="(i.fieldName == '听课周数' || i.fieldName == '周听课次数') && i.isUse == 1" class="width110" v-model="allValue[i.fieldCode]"></el-input>
								<div v-if="i.fieldName == '听课出差时间' && i.isUse == 1">
									<el-date-picker class="time" v-model="allValue.tkCckssj" type="date" value-format="yyyy-MM-dd"></el-date-picker>&nbsp;-
									<el-date-picker class="time" v-model="allValue.tkCcjssj" type="date" value-format="yyyy-MM-dd"></el-date-picker>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" v-show="dataForm['跟课信息'] && dataForm['跟课信息'].filter(m=>m.isUse ==1).length>0">
			<el-tab-pane label="跟课信息" name="first">
				<div class="my-form-container" :style="{height:Math.ceil(dataForm['跟课信息'].filter(m=>m.isUse ==1).length/2)*60+2+'px'}">
					<el-row class="my-form-item" style="border:none">
						<el-col class="border" :span="12" v-for="i in dataForm['跟课信息']" :key="i" v-if="i.isUse == 1">
							<div class="my-form-item-label">{{i.fieldName == '跟课出差时间'?'出差时间':i.fieldName}}</div>
							<div class="my-form-item-value">
								<el-select  v-if="i.fieldName == '跟课课时'" v-model="allValue.gkks" placeholder="请选择" class="width110" >
									<el-option v-for="item in classHours" :key="item.label" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<div v-if="i.fieldName == '跟课出差时间'">
									<el-date-picker class="time" v-model="allValue.gkCckssj" type="date" value-format="yyyy-MM-dd"></el-date-picker>&nbsp;-
									<el-date-picker class="time" v-model="allValue.gkCcjssj" type="date" value-format="yyyy-MM-dd"></el-date-picker>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" v-show="dataForm['评价信息'] && dataForm['评价信息'].filter(m=>m.isUse ==1).length>0">
			<el-tab-pane label="评价信息" name="first" >
				<div class="my-form-container" style="height:62px">
					<el-row class="my-form-item" style="border:none">
						<el-col class="border" :span="12" v-for="i in dataForm['评价信息'].filter(m=>m.isUse ==1)" :key="i">
							<div class="my-form-item-label" v-if="i.isUse == 1">{{i.fieldName}}</div>
							<div class="my-form-item-value" style="line-height:0" v-if="i.fieldName == '评价标准' && i.isUse == 1">
								<span class="front-css" v-if="allValue.pjbzInfo.gradeClass">{{allValue.pjbzInfo.gradeClass}}</span>
								<span class="small-btn color-yellow" :style="{'margin-top':allValue.pjbzInfo.gradeClass?'6px':'16px'}" @click="openDialog"><img src="../../../../assets/assessment/icon-plan-record-save.png"> 评价</span>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
		</el-tabs>
		<!-- 调停课情况-->
        <ttDialog ref="tt" :ttkqkInfo="ttAllValue"></ttDialog>
		<!-- 评价标准 -->
		<evaluateDialog ref="pjbz" @savePJBZ="pjbzChange"></evaluateDialog>
		<div class="button-group">
			<div class="" @click="saveData" v-if="isSuccess">提交</div>
			<div class="disabled" v-else>提交</div>
            <div class="" >取消</div>
		</div>
		<el-dialog title="提    示" :visible.sync="dialogNotice" :close-on-click-modal="false">
			<div class="notice">
				<h1>时间未到不可填写！</h1>
				<h2>填报日期为：{{dataForm['填报时间'].filter(item=>item.fieldName=='填报时间')[0].tbsj}}</h2>
			</div>
			<div slot="footer" class="footer-btn">
				<div class="search-button color-green" @click="dialogNotice = false">
					<span>返回</span>
				</div>
			</div>
    	</el-dialog>
	</div>
</template>

<script>
  import evaluateDialog from './evaluateDialog.vue'
  import ttDialog from './ttDialog.vue'
  import {lineDataSave,dataConfigList,getDataInfo} from "@/api/lineData"
  export default {
	data(){
		return {
			dialogNotice:false,
			isSuccess:true,
			xq:[],
			dataForm:{},
			activeName:'first',
			classHours:[
				{babel:1,value:1}
			],
			radio:'',
			//授课方式
			skList:[
			{label:'实验',value:'实验'},
			{label:'研讨',value:'研讨'},
			{label:'习题课',value:'习题课'},
			{label:'军事基础训练',value:'军事基础训练'},
			{label:'外业实践',value:'外业实践'},
			{label:'综合素质项目',value:'综合素质项目'},
			{label:'辅导答疑',value:'辅导答疑'},
			{label:'自习',value:'自习'},
			],
			currentXQ:'',
			allValue:{
				skjyxn:'',//授课教员是否
				kcmcxn:'',//课程名称是否
				skddxn:'',//上课地点是否
				xnkcmcValue:'',//校内课程名名称
				skjyValue:'',//上课教员姓名
				skddValue:'',//上课地点名称
				ttTrue:false,
				ttFalse:false,
			}
		}
	},
	components:{
		evaluateDialog,
		ttDialog
	},
	mounted(){
		this.initList();
		this.getInfo();
	},
	methods: {
		changeValue(e){
			let param = {
				riqi:e,
				xueqi:this.dataForm['时间信息'].filter(i=>i.fieldCode == 'xueqi')[0].xueqi
			}
			this.commonApi.getWeeks(param).then(res=>{
				let val = res.data.termRemarksList.filter(m=>m.isCurrent).length>0?res.data.termRemarksList.filter(m=>m.isCurrent)[0].zhouci:''
				this.$set(this.allValue,'zhouci',val)
			})
		},
		async getInfo(){
			let res = await getDataInfo();
			this.allValue = {
				...this.allValue,
				...res.data
			}
		},
		async initList(){
			let params = {
				roleId:this.$store.getters.userInfo.role_id,
				roleName:this.$store.getters.userInfo.role_name,
				xueqi:this.currentXQ,
				needFieldDatasources:true
			}
			let res = await dataConfigList(params);
			console.log(res)
			// this.dataForm = res.data;
			//学期列表
			this.commonApi.getXQOption().then(res=>{
				this.xq = res.data
				this.commonApi.getCurrentXQ().then(mes=>{
					this.$set(this.dataForm['时间信息'],'xueqi',mes.data.xqmc)
					this.currentXQ = mes.data.xqmc
				})
			});
		},
		//调停课弹窗
		choseTT(){
			this.$refs.tt.dialogVisible = true;
			this.ttAllValue = {
				...this.allValue,
				jieciList:this.dataForm['时间信息'].filter(item=>item.fieldName=='节次')[0].fieldDatasources,
				skddList:this.dataForm['授课信息'].filter(item=>item.fieldName=='上课地点')[0].fieldDatasources,
				skjyList:this.dataForm['授课信息'].filter(item=>item.fieldName=='授课教员')[0].fieldDatasources,
			}
		},
		openDialog(){
			this.$refs.pjbz.dialogVisible = true
		},
		pjbzChange(e){
			this.allValue.pjbzInfo = e
		},
		//调停课情况
		tt1(e){
			this.ttFalse = !e
		},
		tt(e){
			this.ttTrue = !e
		},
		async saveData(){
			let time = new Date(this.dataForm['填报时间'].filter(item=>item.fieldName=='填报时间')[0].tbsj).getTime()
			if(new Date().getTime() <time ){
				this.dialogNotice = true;
				return
			}
			console.log(this.allValue)
			let params = {
				...this.allValue,
				skjyId:this.allValue.skjyxn?this.allValue.skjyValue.split('-')[1]:'',
				skjyName:this.allValue.skjyxn?this.allValue.skjyValue.split('-')[0]:this.allValue.skjyName,
				kcmcId:this.allValue.kcmcxn?this.allValue.xnkcmcValue.split('-')[1]:'',
				kcmcName:this.allValue.kcmcxn?this.allValue.kcmcxn.split('-')[0]:this.allValue.kcmcName,
				skddId:this.allValue.skddxn?this.allValue.skddValue.split('-')[1]:'',
				skddName:this.allValue.skddxn?this.allValue.skddValue.split('-')[0]:this.allValue.skddName
			}
			let res = await lineDataSave(JSON.stringify(params));
			if(res.code == 200){
				this.$message.success('填报成功！')
				this.isSuccess = false
			}
		}
	}
  };
</script>
<style scoped lang="less">
@import "../../../../styles/commonCss.less";
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.wrapper-container {
		width: 1624px;
		margin: 47px auto 0;
	}
	/deep/.my-form-container{
		width: 1536px;
		margin-top: 0;
		
	}
	/deep/.my-form-item{border-bottom:none!important}
	.border{border-bottom: 1px solid rgba(0, 76, 167, 0.39);}
	/deep/.my-form-item-value{
		border-right: 1px solid rgba(0, 76, 167, 0.39);
	}
	/deep/.el-tabs__nav{
		background: rgba(77,129,192,0.1);
		padding: 0 28px;
		border-radius: 6px 6px 0px 0px;
		
	}
	.right78{margin-right: 60px;}
	/deep/.el-tabs__item{
		line-height: 38px;
		color:#054CA7 ;
		font-weight: bold;
	}
	/deep/.el-tabs__active-bar{
		height:0px
	}
	/deep/.el-tabs__nav-wrap::after {
		background-color:rgba(0,76,167,0.39);
		height: 1px;
	}
	.disabled{
		background: #F5F5F5!important;
		border: 1px solid #818180!important;
		color: #A8A8A6!important;
		cursor: not-allowed!important;
	}
	.front-css{
		border-bottom: 1px solid #004CA7;
		padding: 0 10px;
		margin: 6px 0 6px;
		display: inline-block;
		line-height: 16px;
	}
	.color-yellow{
		background: #FEF1E8;
		border: 1px solid #F86900;
		color: #F86900;
		width: 86px;
		margin: 0;
	}
	.width110{width: 110px;}
	.width321{width: 321px;}
	.img-css{
		width: 15px;
		margin-left: 5px;
		cursor: pointer;
	}
	.box-center{
		display: flex;
		align-items: center;
		margin-right: 40px;
	}
	/deep/.el-radio{margin-right: 8px;}
	.notice{
		text-align: center;
		margin-top: 40px;
		h1,h2{
			font-size: 18px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			line-height: 36px;
			color: #004CA7;
		}
	}
	.color-green{
		color: #02c86c;
		border: 1px solid #02c86c;
		background: #dfffef;
		width: 70px;
		margin-bottom: 50px;
	}
	.footer-btn{
		display: flex;
		justify-content: center;
	}
</style>